<template>
  <div id="demo">
    <div class="condition">
      <span>
        <el-select
          v-model="period"
          placeholder="请选择"
          @change="chengeWeek"
          style="width: 220px"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </span>
      <el-button
        type="primary"
        class="btn"
        size="small"
        style="width: 80px"
        @click="closeProjectList"
         v-if="roleId<15"
        >批量处理</el-button
      >
    </div>

    <div class="weekList">
      <el-table
        ref="baseTable"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#F9F9F9' }"
        :data="dataOption"
        v-loading="tableLoading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" min-width="1" type="selection">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="姓名"
          min-width="2"
        ></el-table-column>

        <el-table-column
          prop="period"
          align="center"
          label="时间段"
          min-width="3"
        ></el-table-column>
        <el-table-column
          prop="sumTime"
          align="center"
          label="工时数(天)"
          min-width="2"
        ></el-table-column>
        <el-table-column align="center" label="操作" min-width="3">
          <template slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click="lookInfo(scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              plain
              size="mini"
              @click="closeProject(scope.row)"
              v-if="roleId<15 && scope.row.handleFlag == true"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="查看工时信息"
      :visible.sync="dialogStation"
      width="1300px"
      center
    >
      <el-table
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#F9F9F9' }"
        :data="tableData"
        v-loading="tableLoading"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          align="center"
          label="日报ID"
        ></el-table-column>
        <el-table-column
          prop="taskDate"
          align="center"
          label="日期"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          align="center"
          label="项目名"
        ></el-table-column>
        <el-table-column
          prop="time"
          align="center"
          label="工时数（天）"
        ></el-table-column>
        <el-table-column
          prop="content"
          align="center"
          label="工作内容"
        ></el-table-column>
        <el-table-column prop="achievement" align="center" label="业绩属性">
          <template slot-scope="scope">
            <span
              v-for="(i, j) in scope.row.achievement"
              :key="j"
              v-if="i.value"
            >
              {{ i.name }}: <span>{{ i.value }}</span
              >个
              <br />
            </span>
          </template>
        </el-table-column>
        <el-table-column
          value-format="yyyy-MM-dd"
          prop="createTime"
          align="center"
          label="提交时间"
        >
          <template slot-scope="scope">{{
            scope.row.createTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="isConfirm" align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.isConfirm == 1">已确认</span>
            <span v-else>未确认</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  weeklyAnomalyList,
  periodWeekList,
  userWeeklyList,
  handleAnomalyList,
} from "@/service/Api.js"; //接口

export default {
  components: {},
  name: "weeklyAnomaly",
  data() {
    return {
      dataOption: [],
      period: "",
      options: [],
      tableData: [],
      tableLoading: false,
      dialogStation: false,
      num: "",
      roleId:"",
    };
  },
  created() {
    this.weekDate();
      let userInfo = sessionStorage.getItem("userInfo");
      this.roleId = JSON.parse(userInfo).roleId;
  },
  methods: {
    //获取周报时间段
    weekDate() {
      periodWeekList().then((res) => {
        if (res.code == 0) {
          this.options = res.data;
          this.period = res.data[0];
          this.options.unshift("全部");
          this.dataList();
        }
      });
    },
    //查看按钮
    lookInfo(row) {
      this.dialogStation = true;
      let data = {
        uid: row.uid,
        projectId: row.pid,
        period: row.period,
      };
      userWeeklyList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].achievement = JSON.parse(
              this.tableData[i].achievement
            );
          }
        }
      });
    },
    //时间段变化
    chengeWeek(val) {
        this.dataList();   
    },

    dataList() {
      //异常周报列表
      //加载状态
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        target:'#demo'
      });
      if (this.period == "全部") {    
        weeklyAnomalyList({ period: "" }).then((res) => {
          this.dataOption = res.data
          loading.close();
        });
      } else {       
        weeklyAnomalyList({ period: this.period }).then((res) => {
          this.dataOption = res.data;
          loading.close();
        });
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.num = val;
    },
    //单个处理
    closeProject(row) {
      this.$confirm("确定要处理周报异常？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let arrIds = [];

          let data = {
            uid: row.uid,
            period: row.period,
          };
          arrIds.push(data);
          handleAnomalyList(arrIds).then((res) => {
            if (res.code == 0) {
              this.$message.success("处理成功！");
              this.dataList();
            }
          });
        })
        .catch(() => {});
    },
    //批量处理
    closeProjectList() {
      if (this.num.length == 0) {
        this.$message.warning("请选择你要处理的周报");
        return;
      }
      this.$confirm("确定要处理周报异常？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let arrIds = [];

          this.num.forEach((el) => {
            let data = {
              uid: el.uid,
              period: el.period,
            };
            arrIds.push(data);
          });
          handleAnomalyList(arrIds).then((res) => {
            if (res.code == 0) {
              this.$message.success("处理成功！");
              this.dataList();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style  scoped>
.condition {
  display: flex;
  justify-content: flex-start;
}
.weekList {
  margin-top: 10px;
}
.btn {
  margin-left: 20px;
}
</style>